<template>
	<view class="content">
		
		
		
			<image class='headerImageView' mode="aspectFill" :src="avatar" @click="uploadAvatar"></image>
			
			<view class="headerNextHint">点击更换头像</view>
			
			
			
			
			<view class="cellBox">
			
			
			
			<view class='cellOneLine'>
				<view class='cellOneLineLeft'>
						
					<view class='iconleftHint'>昵称</view>
				
				</view>
				<view class='cell-item-ft'>
					<!-- <view class="rightViewHint">{{nickname}}</view> -->
					<input class='nickNameInput' placeholder='' v-model="nickname"></input>
				
				</view>
			</view>
			
			
			<view  style="width: 100%;height: 2upx;background-color: #eeeeee;"></view>
			
			
			
			<view class='cellOneLine'  @click="navigateToHandle('/pages/member/invite/index')">
				<view class='cellOneLineLeft'>
						
					<view class='iconleftHint'>用户名</view>
				
				</view>
				<view class='cell-item-ft'>
					<view class="rightViewHint">{{username}}</view>
			
				</view>
			</view>
			
			
			
			<view  style="width: 100%;height: 2upx;background-color: #eeeeee;"></view>
			
			
			
			<view class='cellOneLine' >
				<view class='cellOneLineLeft'>
						
					<view class='iconleftHint'>手机号</view>
				
				</view>
			<!-- 	<view class='cell-item-ft'> -->
					<view class="rightViewHint">{{getShowPhone()}}</view>
				
				<!-- </view> -->
			</view>
			
			
			<view  style="width: 100%;height: 2upx;background-color: #eeeeee;"></view>
			
			
			
			
			<view class='cellOneLine'  @click="navigateToHandle('/pages/member/invite/index')">
				<view class='cellOneLineLeft'>
						
					<view class='iconleftHint'>性别</view>
				
				</view>
				<view class='cell-item-ft'>
				
					
					<picker class="pickerView" mode="selector" @change="bindPickerChange" :value="index" :range="objectSex">
				
						
						<view class="rightViewHint">{{objectSex[sex]}}</view>
					
					</picker>
	<!-- 				<image class='rightRow' src='/static/image/my/arrowright.png'
					></image> -->
					
					<image class='rightRow' mode="aspectFit" src='/static/image/my/arrowright.png'
					></image>
				</view>
			</view>
			
	
			
		
		<view  style="width: 100%;height: 2upx;background-color: #eeeeee;"></view>
		
			
			
			
		<view class='cellOneLine' >
					<view class='cellOneLineLeft'>
							
						<view class='iconleftHint'>生日</view>
					
					</view>
					<view class='cell-item-ft'>
					
						
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					
							
							<view class="rightViewHint">{{birthday}}</view>
						
						</picker>
		<!-- 				<image class='rightRow' src='/static/image/my/arrowright.png'
						></image> -->
						
						<image class='rightRow' mode="aspectFit" src='/static/image/my/arrowright.png'
						></image>
					</view>
				</view>
			
				

						<!-- 			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
										<view class="uni-input">{{birthday}}</view>
										<view class='cell-item-ft down'>
											<image class='cell-ft-next icon' src='/static/image/ic-pull-down.png'></image>
										</view>
									</picker> -->
			
		
			
			
			
			
			</view>
	
			
			
			<view class="btttonView" @click="submitHandler()" >
					保存
					
					<!-- <button class="bt-style" @click="quitLogin()">退出登录</button> -->
					
					
					<!-- <view class="loginView" @click="loginHandler">注册</view> -->
				</view>
		
				<view style="width: 100%;height: 120upx;"></view>
				
			
		
		
		
	
	
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'picker',
				avatar: '',
				objectSex: ['男', '女', '未知'],
				index: 2,
				nickname: '',
				username: "",
				mobile: '',
				date: '1990-01-01',
				birthday: '请选择',
				sex: 0,
				submitStatus: false
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			//性别
			bindPickerChange: function(e) {
				this.sex = e.target.value;
			},
			//生日
			bindDateChange: function(e) {
				this.birthday = e.target.value;
			},
			
			
			getShowPhone(){
				
				var phone = this.mobile;
				
				if (phone.length > 10){
					
					phone = phone.substr(0,3) + ' ' + phone.substr(3,4) + ' ' + phone.substr(7,4) 
					
				}
					
				// if (phone.length > 7) {
				// 	phone = phone.sub(7, 0, ' ')
				// }
				// if (phone.length > 3) {
				// 	phone = phone.splice(3, 0, ' ')
				// }
				return phone;
			},
			
			
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 用户上传头像
			uploadAvatar() {
				this.$api.uploadFiles(res => {
					if (res.status) {
						let avatar = res.data.url // 上传成功的图片地址
						// 执行头像修改
						this.$api.changeAvatar({
							avatar: avatar
						}, res => {
							if (res.status) {
								this.$common.successToShow('上传成功', () => {
									this.avatar = res.data.avatar
								})
							} else {
								this.$common.errorToShow(res.msg)
							}
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			// 保存资料
			submitHandler() {
				this.submitStatus = true;
				let sex = this.sex + 1;
				if (this.birthday == '请选择') {
					this.$common.successToShow('请选择出生日期');
					this.submitStatus = false;
					return false;
				} else {
					this.$api.editInfo({
						sex: sex,
						birthday: this.birthday,
						nickname: this.nickname
					}, res => {
						this.$common.successToShow(res.msg, result => {
							// this.submitStatus = false;
							uni.navigateBack({
								delta: 1
							});
						});
					}, res => {
						this.submitStatus = false;
					});
				}
			}
		},
		onLoad: function() {
			var _this = this;
			_this.$api.userInfo({}, function(res) {
				if (res.status) {
					var the_sex = res.data.sex - 1;
					if (res.data.birthday == null) {
						res.data.birthday = '请选择';
					}
					_this.nickname = res.data.nickname;
					_this.mobile = res.data.mobile||'暂无手机号';
					console.log(_this.mobile);
					_this.sex = the_sex;
					_this.index = the_sex;
					_this.birthday = res.data.birthday;
					_this.avatar = res.data.avatar;
					if (res.data.username) {
						_this.username = res.data.username;
					} else {
						_this.username = "暂无用户名"
					}
					if (_this.birthday != '请选择') {
						_this.date = _this.birthday;
					}
				} else {
					//报错了
					_this.$common.errorToShow(res.msg);
				}
			});
		}
	}
</script>

<style>
	page{
		
		background-color: #F6f6f6;
		
		/* background-color: #007AFF; */
		
	}
		
		
	.headerImageView{
		
		margin-top: 36upx;
		
		margin-left: 255upx;
		
		width: 240upx;
		
		height: 240upx;
		
		border-radius: 120upx;
		
		border-width: 6upx;
		
		border-color: #FF5A5F;
		
		border-style: solid;
		
		
	}
	
	.headerNextHint{
		
		color: #3A3A3A;
		
		width: 100%;
		
		text-align: center;
		
		font-size: 24upx;
		
		
		margin-top: 30upx;
		
		
	}
	
		.cellBox{
			
		
			width: 678upx;
			
			margin-left: 36upx;
			
			margin-right: 30upx;
			
			// height: 300upx;
			
			border-radius: 22upx;
			
			margin-top: 75upx;
			background: white;
			z-index: 999;
		}
		
		
		.cellOneLine{
			
			width: 100%;
			
			height: 104upx;
			
			display: flex;
			
			flex-direction: row;
			
			justify-content: space-between;
			
			
		}
		
		
		
		.cellOneLineLeft{
			
			width: 70%;
			
			height: 100%;
			
			display: flex;
		
			flex-direction: row;
			
			align-items: center;
			
			// background-color: #007AFF;
			
		}
		
	
		
		
		.iconleftHint{
			
			height: 104upx;
			
			line-height: 104upx;
			
			
			margin-left: 36upx;
			
		
			
			color: rgba(0, 0, 0, 1);
			font-size: 32upx;
		
			
			/* background-color: #007AFF; */
			
			
		}
		
		.nickNameInput{
			
			
			/* background-color: #007AFF; */
			
			
			color: #3A3A3A;
			
			font-size: 28upx;
			
			margin-right: 27upx;
			
			text-align: right;
			
			
		}
		
	
	.rightViewHint{
		
		
		color: #3A3A3A;
		
		
		width: 200upx;
		
		text-align: right;
		
		font-size: 28upx;
		
		margin-right: 27upx;
		
		height: 104upx;
		
		line-height: 104upx;
		
		/* background-color: #007AFF; */
		
		
		
	}
	
	.rightRow{
		
		
		width: 40upx;
		
		height: 40upx;
		
		// background-color: #007AFF;
		
		
		/* margin-right: 36upx; */
		
		
	}
	
	.pickerView{
		
		/* background-color: #0D9E13; */
		
		/* margin-right: 27upx; */
		
		/* display: flex;
		
		flex-direction: row;
		
		position: relative;
		 */
		
		
		/* width: 100upx; */
		
		height: 100%;
		
		
	}
	
	
		.btttonView{
			
		margin-top: 185upx;
		
		margin-left: 36upx;
		
		text-align: center;
		
		width: 678upx;
		
		height: 90upx;
		
		// margin-left: 36upx;
		
		font-size: 36upx;
		
		color: #FFFFFF;
		
		line-height: 90upx;
		
		// border-radius: 45upx;
		
		
		background-color: #FF5A5F;
		
		
		box-shadow:   0px 3upx 7upx rgba(0,0,0,0.06),  0upx 2upx 4upx rgba(0,0,0,0.03),0upx 1upx 2upx rgba(0,0,0,0.03);
		
		
		
		}
</style>
